<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between">
                <div>
                    <el-input clearable @clear="initEmps"
                              v-model="empName"
                              @keydown.enter.native="initEmps"
                              style="width: 300px;margin-right: 10px"
                              size="small"
                              prefix-icon="el-icon-search"
                              :disabled="showAdvanceSearchVisible"
                              placeholder="输入员工进行搜索...."></el-input>
                    <el-button :disabled="showAdvanceSearchVisible" @click="initEmps" type="primary" size="small" icon="el-icon-search">搜索</el-button>
                    <el-button type="primary" size="small" @click="showAdvanceSearchVisible= !showAdvanceSearchVisible" >
                        <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'" aria-hidden="true"></i>
                        高级搜索
                    </el-button>
                </div>
                <div>
                    <el-upload
                            style="display:inline-flex;margin-right: 10px"
                            :headers="headers"
                            :show-file-list="false"
                            :before-upload="beforeUpload"
                            :on-success="onSuccess"
                            :on-error="onErrors"
                            :disabled="importDataDisabled"
                            action="/employee/basic/import">
                        <el-button type="success" size="small" :icon="importDataBtnIcon" :disabled="importDataDisabled">

                            {{importDataBtnText}}
                        </el-button>
                    </el-upload>

                    <el-button @click="exportData" type="success" size="small" icon="el-icon-download">
                        导出数据
                    </el-button>
                    <el-button size="small" type="primary" icon="el-icon-plus" @click="showAddEmpView">添加员工</el-button>
                </div>
            </div>
        </div>
        <transition name="slide-fade">
        <div v-show="showAdvanceSearchVisible" style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px">
            <el-row>
                <el-col :span="5">
                    政治面貌:
                    <el-select size="mini" style="width: 130px" v-model="searchValue.politicId" placeholder="政治面貌">
                        <el-option
                                v-for="item in politicsstatus"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    民族:
                    <el-select size="mini" style="width: 130px" v-model="searchValue.nationId" placeholder="民族">
                        <el-option
                                v-for="item in nations"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    职位:
                    <el-select size="mini" style="width: 130px" v-model="searchValue.posId" placeholder="职位">
                        <el-option
                                v-for="item in positions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    职称:
                    <el-select size="mini" style="width: 130px" v-model="searchValue.jobLevelId" placeholder="职称">
                        <el-option
                                v-for="item in joblevels"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="7">
                    聘用形式:
                    <el-radio-group v-model="searchValue.engageForm" style="margin-top: 2px">
                        <el-radio  label="劳动合同"></el-radio>
                        <el-radio  label="劳务合同"></el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row style="margin-top: 10px">
                <el-col :span="5">
                    所属部门：
                    <el-popover
                            placement="bottom"
                            title="选择部门"
                            width="200"
                            trigger="manual"
                            v-model="visible2">
                        <el-tree :data="allDeps"
                                 :props="defaultProps"
                                 default-expand-all
                                 @node-click="searchHandleNodeClick">

                        </el-tree>
                        <div slot="reference" style="width: 130px;display:inline-flex;
                                       border: 1px solid #dedede; height: 24px;cursor: pointer;
                                        align-items: center;font-size: 13px;padding-left: 8px;
                                         box-sizing: border-box;" @click="showDepView2">
                            {{inputDepName2}}
                        </div>
                    </el-popover>
                </el-col>
                <el-col :span="10">
                    入职日期:
                    <el-date-picker
                            v-model="searchValue.beginDateScope"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="5" :offset="4">
                    <el-button size="mini" @click="cancel" >取消</el-button>
                    <el-button size="mini" type="primary" icon="el-icon-search" @click="initEmps('advance')">搜索</el-button>
                </el-col>
            </el-row>
        </div>
        </transition>
        <div style="margin-top: 10px">
            <el-table
                    :data="emps"
                    border
                    stripe
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>

                <el-table-column
                        prop="name"
                        label="姓名"
                        width="80"
                        fixed>
                </el-table-column>

                <el-table-column
                        prop="workID"
                        label="工号"
                        width="100">
                </el-table-column>

                <el-table-column
                        prop="gender"
                        label="性别"
                        width="85">
                </el-table-column>

                <el-table-column
                        prop="birthday"
                        label="出生日期"
                        width="120">
                </el-table-column>

                <el-table-column
                        prop="idCard"
                        label="身份证号码"
                        align="left"
                        width="200">
                </el-table-column>

                <el-table-column
                        prop="wedlock"
                        label="婚姻状况"
                        width="80">
                </el-table-column>

                <el-table-column
                        prop="nation.name"
                        label="民族"
                        width="50">
                </el-table-column>

                <el-table-column
                        prop="nativePlace"
                        label="籍贯"
                        width="80">
                </el-table-column>

                <el-table-column
                        prop="politicsStatus.name"
                        label="政治面貌"
                        width="150">
                </el-table-column>

                <el-table-column
                        prop="email"
                        label="电子邮件"
                        align="left"
                        width="220">
                </el-table-column>

                <el-table-column
                        prop="phone"
                        label="电话号码"
                        align="left"
                        width="150">
                </el-table-column>

                <el-table-column
                        prop="address"
                        label="联系地址"
                        align="left"
                        width="280">
                </el-table-column>

                <el-table-column
                        prop="joblevel.name"
                        label="职称"
                        align="left"
                        width="120">
                </el-table-column>

                <el-table-column
                        prop="department.name"
                        label="所属部门"
                        align="left"
                        width="100">
                </el-table-column>

                <el-table-column
                        prop="position.name"
                        label="职位"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="engageForm"
                        label="聘用信息"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="tiptopDegree"
                        label="最高学历"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="school"
                        label="学校"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="specialty"
                        label="专业"
                        width="150">
                </el-table-column>

                <el-table-column
                        prop="workState"
                        label="在职状态"
                        width="70">
                </el-table-column>

                <el-table-column
                        prop="beginDate"
                        label="入职日期"
                        width="120">
                </el-table-column>

                <el-table-column
                        prop="conversionTime"
                        label="转正日期"
                        width="120">
                </el-table-column>

                <el-table-column
                        prop="beginContract"
                        label="合同起始日期"
                        width="120">
                </el-table-column>

                <el-table-column
                        prop="endContract"
                        label="合同截至日期"
                        width="120">
                </el-table-column>

                <el-table-column
                        label="合同期限"
                        width="120">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.contractTerm}}</el-tag>年
                    </template>
                </el-table-column>

                <el-table-column
                        label="操作"
                        fixed="right"
                        width="200">
                    <template slot-scope="scope">
                        <el-button style="padding: 3px" size="mini" @click="showEditEmpView(scope.row)">编辑</el-button>
                        <el-button style="padding: 3px" size="mini" type="primary">查看高级资料</el-button>
                        <el-button style="padding: 3px" size="mini" type="danger" @click="deleteEmp(scope.row)" >删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div style="display: flex;justify-content: flex-end">
                <el-pagination
                        background
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        layout="sizes,prev, pager, next, jumper, ->, total"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
             <div>
                 <el-form ref="empForm" :model="emp" :rules="rules">
                     <el-row>
                         <el-col :span="6">
                             <el-form-item label="姓名:" prop="name">
                                 <el-input size="mini" prefix-icon="el-icon-edit" style="width: 150px" v-model="emp.name" placeholder="请输入员工姓名"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="5">
                             <el-form-item label="性别:" prop="gender">

                                     <el-radio-group v-model="emp.gender" style="margin-top: 12px">
                                         <el-radio  label="男">男</el-radio>
                                         <el-radio  label="女">女</el-radio>
                                     </el-radio-group>

                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="出生日期:" prop="birthday">
                                 <el-date-picker
                                         v-model="emp.birthday"
                                         type="date"
                                         size="mini"
                                         style="width: 150px"
                                         value-format="yyyy-MM-dd"
                                         placeholder="出生日期">
                                 </el-date-picker>
                             </el-form-item>
                         </el-col>
                         <el-col :span="7">
                             <el-form-item label="政治面貌:" prop="politicId">
                                 <el-select size="mini" style="width: 200px" v-model="emp.politicId" placeholder="政治面貌">
                                     <el-option
                                             v-for="item in politicsstatus"
                                             :key="item.id"
                                             :label="item.name"
                                             :value="item.id">
                                     </el-option>
                                 </el-select>
                             </el-form-item>
                         </el-col>
                     </el-row>

                     <el-row>
                         <el-col :span="6">
                             <el-form-item label="民族:" prop="nationId">
                                 <el-select size="mini" style="width: 150px" v-model="emp.nationId" placeholder="民族">
                                     <el-option
                                             v-for="item in nations"
                                             :key="item.id"
                                             :label="item.name"
                                             :value="item.id">
                                     </el-option>
                                 </el-select>
                             </el-form-item>
                         </el-col>

                         <el-col :span="5">
                             <el-form-item label="籍贯:" prop="nativePlace">
                                 <el-input size="mini" prefix-icon="el-icon-edit" style="width: 150px" v-model="emp.nativePlace" placeholder="请输入籍贯"></el-input>
                             </el-form-item>
                         </el-col>

                         <el-col :span="6">
                             <el-form-item label="电子邮箱:" prop="email">
                                 <el-input size="mini" prefix-icon="el-icon-message" style="width: 150px" v-model="emp.email" placeholder="请输入电子邮箱"></el-input>
                             </el-form-item>
                         </el-col>

                         <el-col :span="7">
                             <el-form-item label="联系地址:" prop="address">
                                 <el-input size="mini" prefix-icon="el-icon-edit" style="width: 200px" v-model="emp.address" placeholder="请输入员工联系地址"></el-input>
                             </el-form-item>
                         </el-col>
                     </el-row>
                     <el-row>
                         <el-col :span="6">
                             <el-form-item label="职位:" prop="posId">
                                 <el-select size="mini" style="width: 150px" v-model="emp.posId" placeholder="职位">
                                     <el-option
                                             v-for="item in positions"
                                             :key="item.id"
                                             :label="item.name"
                                             :value="item.id">
                                     </el-option>
                                 </el-select>
                             </el-form-item>
                         </el-col>

                         <el-col :span="5">
                             <el-form-item label="职称:" prop="jobLevelId">
                                 <el-select size="mini" style="width: 150px" v-model="emp.jobLevelId" placeholder="职称">
                                     <el-option
                                             v-for="item in joblevels"
                                             :key="item.id"
                                             :label="item.name"
                                             :value="item.id">
                                     </el-option>
                                 </el-select>
                             </el-form-item>
                         </el-col>

                         <el-col :span="6">
                             <el-form-item label="所属部门:" prop="departmentId">
                                 <el-popover
                                         placement="bottom"
                                         title="选择部门"
                                         width="200"
                                         trigger="manual"
                                         v-model="visible">
                                        <el-tree :data="allDeps"
                                                 :props="defaultProps"
                                                 default-expand-all
                                                 @node-click="handleNodeClick">

                                        </el-tree>
                                        <div slot="reference" style="border-radius: 5px;width: 150px;display:
                                        inline-flex;border: 1px solid #dedede; height: 28px;cursor:
                                         pointer;align-items: center;font-size: 13px;padding-left: 10px;padding-bottom: 10px;" @click="showDepView">
                                            {{inputDepName}}
                                        </div>
                                 </el-popover>

                             </el-form-item>
                         </el-col>

                         <el-col :span="7">
                             <el-form-item label="电话号码:" prop="phone">
                                 <el-input size="mini" prefix-icon="el-icon-phone" style="width: 200px" v-model="emp.phone" placeholder="请输入员工电话号码"></el-input>
                             </el-form-item>
                         </el-col>
                     </el-row>
                     <el-row>
                         <el-col :span="6">
                             <el-form-item label="工号:" prop="workID">
                                 <el-input size="mini" disabled prefix-icon="el-icon-edit" style="width: 150px" v-model="emp.workID" placeholder="请输入员工工号"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="5">
                             <el-form-item label="学历:" prop="tiptopDegree">
                                 <el-select size="mini" style="width: 150px" v-model="emp.tiptopDegree" placeholder="学历">
                                     <el-option
                                             v-for="item in tiptopDegrees"
                                             :key="item"
                                             :label="item"
                                             :value="item">
                                     </el-option>
                                 </el-select>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="毕业院校:" prop="school">
                                 <el-input size="mini" prefix-icon="el-icon-edit" style="width: 150px" v-model="emp.school" placeholder="请输入学习"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="7">
                             <el-form-item label="专业名称:" prop="specialty">
                                 <el-input size="mini" prefix-icon="el-icon-edit" style="width: 200px" v-model="emp.specialty" placeholder="请输入员工姓名"></el-input>
                             </el-form-item>
                         </el-col>
                     </el-row>

                     <el-row>
                         <el-col :span="6">
                                 <el-form-item label="入职日期:" prop="beginDate">
                                     <el-date-picker
                                             v-model="emp.beginDate"
                                             type="date"
                                             size="mini"
                                             style="width: 123px"
                                             value-format="yyyy-MM-dd"
                                             placeholder="入职日期">
                                     </el-date-picker>
                                 </el-form-item>
                         </el-col>
                         <el-col :span="5">
                             <el-form-item label="转正日期:" prop="conversionTime">
                                 <el-date-picker
                                         v-model="emp.conversionTime"
                                         type="date"
                                         size="mini"
                                         style="width: 123px"
                                         value-format="yyyy-MM-dd"
                                         placeholder="转正日期">
                                 </el-date-picker>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="合同起始日期:" prop="beginContract">
                                 <el-date-picker
                                         v-model="emp.beginContract"
                                         type="date"
                                         size="mini"
                                         style="width: 135px"
                                         value-format="yyyy-MM-dd"
                                         placeholder="合同起始日期">
                                 </el-date-picker>
                             </el-form-item>
                         </el-col>
                         <el-col :span="7">
                             <el-form-item label="合同截止日期:" prop="endContract">
                                 <el-date-picker
                                         v-model="emp.endContract"
                                         type="date"
                                         size="mini"
                                         style="width: 172px"
                                         value-format="yyyy-MM-dd"
                                         placeholder="合同截止日期">
                                 </el-date-picker>
                             </el-form-item>
                         </el-col>
                     </el-row>
                     <el-row>
                         <el-col :span="8">
                             <el-form-item label="身份证:" prop="idCard">
                                 <el-input size="mini" prefix-icon="el-icon-edit" style="width: 180px" v-model="emp.idCard" placeholder="请输入身份证"></el-input>
                             </el-form-item>
                         </el-col>

                         <el-col :span="8">
                             <el-form-item label="聘用方式:" prop="engageForm">
                                 <el-radio-group v-model="emp.engageForm" style="margin-top: 12px">
                                     <el-radio  label="劳动合同"></el-radio>
                                     <el-radio  label="劳务合同"></el-radio>
                                 </el-radio-group>
                             </el-form-item>
                         </el-col>

                         <el-col :span="8">
                             <el-form-item label="婚姻状况:" prop="wedlock">
                                 <el-radio-group v-model="emp.wedlock" style="margin-top: 12px">
                                     <el-radio  label="离异"></el-radio>
                                     <el-radio  label="未婚"></el-radio>
                                     <el-radio  label="已婚"></el-radio>
                                 </el-radio-group>
                             </el-form-item>
                         </el-col>


                     </el-row>

                 </el-form>

             </div>
             <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="doAddEmp">确 定</el-button>
             </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "EmpBasic",
        data(){
            return{
                searchValue:{
                    politicId:null,
                    nationId:null,
                    posId:null,
                    jobLevelId:null,
                    engageForm:'',
                    departmentId:null,
                    beginDateScope:null
                },
                showAdvanceSearchVisible:false,
                headers:{
                    Authorization:window.sessionStorage.getItem('tokenStr')
                },
                importDataBtnText:'导入数据',
                importDataDisabled:false,
                importDataBtnIcon:'el-icon-upload2',
                emps:[],
                allDeps:[],
                title:'',
                inputDepName:'',
                inputDepName2:'',
                loading:false,
                total:0,
                visible:false,
                visible2: false,
                currentPage:1,
                size:10,
                empName:'',
                dialogVisible:false,
                nations:[],
                joblevels:[],
                defaultProps:{
                    children: 'children',
                    label: 'name'
                },
                politicsstatus:[],
                positions:[],
                tiptopDegrees:['博士','硕士','本科','大专','高中','初中','小学','其他'],
                emp: {
                    id :null,
                    name: '',
                    gender: '',
                    birthday: '',
                    idCard: '',
                    wedlock: '',
                    nationId: null,
                    nativePlace: '',
                    politicId: null,
                    email: '',
                    phone: '',
                    address: '',
                    departmentId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: '',
                    tiptopDegree: '',
                    specialty: '',
                    school: '',
                    beginDate: '',
                    workState: '在职',
                    workID: '',
                    contractTerm: null,
                    conversionTime: '',
                    notWorkDate: null,
                    beginContract: '',
                    endContract: '',
                    workAge: null,
                    salaryId: null
                },
                rules:{
                    name:[{required:true,message:'请输入员工姓名',trigger:'blur'}],
                    gender: [{required:true,message:'请输入员工性别',trigger:'blur'}],
                    birthday: [{required:true,message:'请输入员工出生日期',trigger:'blur'}],

                    idCard: [{required:true,message:'请输入员工身份证',trigger:'blur'},
                        {pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                            message:'员工身份证格式不正确',trigger:'blur'}],

                    wedlock: [{required:true,message:'请输入员工婚姻状况',trigger:'blur'}],
                    nationId: [{required:true,message:'请输入员工民族',trigger:'blur'}],
                    nativePlace: [{required:true,message:'请输入员工籍贯',trigger:'blur'}],
                    politicId: [{required:true,message:'请输入员工政治面貌',trigger:'blur'}],

                    email: [{required:true,message:'请输入员工邮件',trigger:'blur'},{type:'email',message:'邮箱地址格式不正确',trigger:'blur'}],

                    phone: [{required:true,message:'请输入员工手机号码',trigger:'blur'}],
                    address: [{required:true,message:'请输入员工地址',trigger:'blur'}],
                    departmentId: [{required:true,message:'请输入部门名称',trigger:'blur'}],
                    jobLevelId: [{required:true,message:'请输入员工职称',trigger:'blur'}],
                    posId: [{required:true,message:'请输入员工职位',trigger:'blur'}],
                    engageForm: [{required:true,message:'请输入员工聘用方式',trigger:'blur'}],
                    tiptopDegree: [{required:true,message:'请输入员工学历',trigger:'blur'}],
                    specialty: [{required:true,message:'请输入员工专业',trigger:'blur'}],
                    school: [{required:true,message:'请输入员工毕业学校',trigger:'blur'}],
                    beginDate: [{required:true,message:'请输入员工入职日期',trigger:'blur'}],
                    workState: [{required:true,message:'请输入员工工作状态',trigger:'blur'}],
                    workID: [{required:true,message:'请输入员工工号',trigger:'blur'}],
                    contractTerm: [{required:true,message:'请输入员工合同期限',trigger:'blur'}],
                    conversionTime: [{required:true,message:'请输入员工转正日期',trigger:'blur'}],
                    notWorkDate: [{required:true,message:'请输入员工离职日期',trigger:'blur'}],
                    beginContract: [{required:true,message:'请输入员工合同起始日期',trigger:'blur'}],
                    endContract: [{required:true,message:'请输入员工合同结束日期',trigger:'blur'}],
                    workAge: [{required:true,message:'请输入员工工龄',trigger:'blur'}]
                }
            }
        },
        mounted(){
            this.initEmps();
            this.initData();
            this.initPositions();
        },
        methods:{
            cancel(){
                this.searchValue={
                    politicId:null,
                    nationId:null,
                    posId:null,
                    jobLevelId:null,
                    engageForm:'',
                    departmentId:null,
                    beginDateScope:null
                }
                this.initEmps();
                this.showAdvanceSearchVisible= !this.showAdvanceSearchVisible;
            },
            onSuccess(){
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataBtnText='导入数据';
                this.importDataDisabled = false;
            },
            onErrors(){
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataBtnText='导入数据';
                this.importDataDisabled = false;
                this.initEmps();
            },
            beforeUpload(){
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataBtnText='正在导入';
                this.importDataDisabled = true;
            },
            exportData(){
                this.downloadRequest('/employee/basic/export');
            },
            showEditEmpView(data){

                this.title='编辑员工信息';
                this.emp = data;

                this.inputDepName = data.department.name;
                this.initPositions();
                this.dialogVisible = true;
            },
            deleteEmp(data){
                this.$confirm('是否永久删除'+data.name+'员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/employee/basic/'+ data.id).then(resp=>{
                        if(resp){
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });
            },
            doAddEmp(){
                if(this.emp.id){
                    this.$refs['empForm'].validate(valid=>{
                        if(valid){
                            this.putRequest('/employee/basic/',this.emp).then(resp=>{
                                if(resp){
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        }
                    })
                }else {
                    this.$refs['empForm'].validate(valid=>{
                        if(valid){
                            this.postRequest('/employee/basic/',this.emp).then(resp=>{
                                if(resp){
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        }
                    })
                }

            },
            searchHandleNodeClick(data){
                this.inputDepName2 = data.name;
                this.searchValue.departmentId = data.id;
                this.visible2 =!this.visible2;
            },
            handleNodeClick(data){
                this.inputDepName =data.name;
                this.emp.departmentId= data.id;
                this.visible=!this.visible;
            },
            showDepView2(){
                this.visible2=!this.visible2;

            },
            showDepView(){
                this.visible=!this.visible;

            },
            getMaxWordId(){
                this.getRequest('/employee/basic/maxWorkID').then(resp=>{
                    if(resp){
                        this.emp.workID =resp.obj;
                    }
                })
            },
            initPositions(){
                this.getRequest('/employee/basic/positions').then(resp=>{
                    if(resp){
                        this.positions =resp;

                    }
                })
            },
            initData(){
              if(!window.sessionStorage.getItem('nations')){
                  this.getRequest('/employee/basic/nations').then(resp=>{
                      if(resp){
                          this.nations =resp;
                          window.sessionStorage.setItem('nations',JSON.stringify(resp));
                      }
                  })
              }else {
                  this.nations = JSON.parse(window.sessionStorage.getItem('nations'));
              }
                if(!window.sessionStorage.getItem('joblevels')){
                    this.getRequest('/employee/basic/joblevels').then(resp=>{
                        if(resp){
                            this.joblevels =resp;
                            window.sessionStorage.setItem('joblevels',JSON.stringify(resp));
                        }
                    })
                }else {
                    this.joblevels = JSON.parse(window.sessionStorage.getItem('joblevels'));
                }

                if(!window.sessionStorage.getItem('politicsstatus')){
                    this.getRequest('/employee/basic/politicsstatus').then(resp=>{
                        if(resp){
                            this.politicsstatus =resp;
                            window.sessionStorage.setItem('politicsstatus',JSON.stringify(resp));
                        }
                    })
                }else {
                    this.politicsstatus = JSON.parse(window.sessionStorage.getItem('politicsstatus'));
                }
                if(!window.sessionStorage.getItem('allDeps')){
                    this.getRequest('/employee/basic/deps').then(resp=>{
                        if(resp){
                            this.allDeps = resp;
                            window.sessionStorage.setItem('allDeps',JSON.stringify(resp));
                        }
                    })
                }else {
                    this.allDeps = JSON.parse(window.sessionStorage.getItem('allDeps'));
                }

            },
            showAddEmpView(){
                this.title = '添加员工';
                this.inputDepName = '';
                this.emp={
                    id :null,
                    name: '',
                    gender: '',
                    birthday: '',
                    idCard: '',
                    wedlock: '',
                    nationId: null,
                    nativePlace: '',
                    politicId: null,
                    email: '',
                    phone: '',
                    address: '',
                    departmentId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: '',
                    tiptopDegree: '',
                    specialty: '',
                    school: '',
                    beginDate: '',
                    workState: '在职',
                    workID: '',
                    contractTerm: null,
                    conversionTime: '',
                    notWorkDate: null,
                    beginContract: '',
                    endContract: '',
                    workAge: null,
                    salaryId: null
                }
                this.initPositions();
                this.getMaxWordId();
                this.dialogVisible = true;
            },
            sizeChange(size){
                this.size = size;
                this.initEmps();
            },
            currentChange(currentPage){
                this.currentPage = currentPage;
                this.initEmps();
            },
            initEmps(type){
                this.loading = true;
                let url = '/employee/basic/?currentPage='+this.currentPage+'&size='+this.size;
                if(type && type == 'advance'){
                    if(this.searchValue.politicId){
                        url+='&politicId='+this.searchValue.politicId;
                    }
                    if(this.searchValue.nationId){
                        url+='&nationId='+this.searchValue.nationId;
                    }
                    if(this.searchValue.posId){
                        url+='&posId='+this.searchValue.posId;
                    }
                    if(this.searchValue.jobLevelId){
                        url+='&jobLevelId='+this.searchValue.jobLevelId;
                    }
                    if(this.searchValue.departmentId){
                        url+='&departmentId='+this.searchValue.departmentId;
                    }
                    if(this.searchValue.beginDateScope){
                        url+='&beginDateScope='+this.searchValue.beginDateScope;
                    }
                    if(this.searchValue.engageForm){
                        url+='&engageForm='+this.searchValue.engageForm;
                    }

                    

                }else {
                    url+='&name='+this.empName
                }


                this.getRequest(url).then(resp=>{
                    this.loading = false;
                    if(resp){
                        this.emps=resp.data;
                        this.total= resp.total;
                    }
                })
            }
        }
    }
</script>

<style>
    .slide-fade-enter-active{
        transition: all .8s ease;
    }
    .slide-fade-leave-active{
        transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to{
        transform: translateX(10px);
        opacity: 0;
    }
</style>